/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../internal/styles/index' as styles;
@use '../internal/styles/tokens' as awsui;

$operator-field-width: 120px;

.root {
  @include styles.styles-reset;
}

.search-field {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: awsui.$space-xs awsui.$space-s;
}

.input-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
  // The xs breakpoint, minus the table tools container padding
  max-inline-size: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
}

.add-token {
  border-inline-start: 1px solid awsui.$color-border-divider-default;
  box-sizing: border-box;
  margin-inline-start: awsui.$space-m;
  padding-inline-start: awsui.$space-m;
}

.tokens {
  margin-block: awsui.$space-xs;
  margin-inline: 0;
}

.token-operator {
  font-weight: bold;
}

.property-editor {
  overflow-y: auto;

  &-header {
    @include styles.default-text-style;
    font-weight: bold;

    padding-block-start: awsui.$space-s;
    padding-block-end: awsui.$space-xxs;
    padding-inline: awsui.$space-s;
  }

  &-header-enum {
    display: flex;
    gap: awsui.$space-xs;

    @include styles.default-text-style;
    font-weight: bold;
    color: awsui.$color-text-dropdown-group-label;

    padding-block: styles.$group-option-padding-with-border-placeholder-vertical;
    padding-inline: calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
  }

  &-form {
    padding-block-start: awsui.$space-xxs;
    padding-block-end: awsui.$space-s;
    padding-inline: awsui.$space-s;
  }

  &-cancel {
    margin-inline-end: awsui.$space-xs;
  }

  &-actions {
    display: flex;
    justify-content: flex-end;

    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-item-default;
    padding-inline: awsui.$space-l;
    padding-block: awsui.$space-s;
  }
}

.property-editor-enum {
  display: flex;
  flex-direction: column;
}

.token-editor {
  display: flex;
  flex-direction: column;
  gap: awsui.$space-s;
  margin-block: awsui.$space-xxs;
  margin-inline: awsui.$space-xxs;

  &-form {
    /* used in test-utils */
  }

  &-field-property {
    flex-grow: 2;
  }

  &-field-operator {
    flex-grow: 1;
  }

  &-field-value {
    flex-grow: 2;
  }

  &-multiselect-wrapper {
    position: relative;
    block-size: awsui.$size-vertical-input;
    min-inline-size: 200px;

    &-inner {
      position: absolute;
      inline-size: 100%;
    }
  }

  &-cancel {
    margin-inline-end: awsui.$space-xs;
  }

  &-submit {
    /* used in test-utils */
  }

  &-actions {
    display: flex;
    justify-content: flex-end;
    padding-block-start: awsui.$space-s;
    border-block-start: 1px solid #{awsui.$color-border-dropdown-item-default};

    // The below code cancels horizontal padding of the popover and horizontal margin of the token-editor.
    padding-inline-end: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
    margin-inline: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
    margin-block-start: awsui.$space-s;
  }

  &-grid {
    @include styles.styles-reset;

    display: grid;
    gap: awsui.$space-s;
    grid-template-columns:
      minmax(min-content, 2fr) minmax(min-content, $operator-field-width) minmax(min-content, 3fr)
      min-content;

    &-group {
      display: contents;
    }

    &.token-editor-narrow {
      grid-template-columns: minmax(100px, 1fr);
      gap: awsui.$space-m;

      > .token-editor-grid-group {
        display: flex;
        flex-direction: column;
        gap: awsui.$space-s;

        &.token-editor-supports-groups {
          padding-block-end: awsui.$space-m;
          border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
        }
      }
    }

    &-header {
      color: awsui.$color-text-column-header;
      font-weight: awsui.$font-weight-heading-s;
      padding-block: awsui.$space-scaled-xxs;
      text-align: start;
    }

    &-cell {
      &:not(.token-editor-narrow) {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
      }

      &.token-editor-narrow:nth-child(4) {
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  &-add-token {
    margin-block-start: awsui.$space-s;
  }
}

.custom-content-wrapper {
  display: contents;
}

.custom-control {
  /* used in test-utils */
}

.input {
  flex: 1;
}

.results {
  // Align with the filter input's vertical padding and border sizes.
  padding-block: calc(#{styles.$control-padding-vertical} + #{awsui.$border-width-field});
  padding-inline: 0;
}

.token-trigger {
  @include styles.text-wrapping;
}

.remove-all,
.join-operation,
.custom-filter-actions {
  /* used in test-utils */
}

.constraint {
  padding-block-start: awsui.$space-xxs;
  @include styles.form-control-description;
}
